.light .cm-selectionBackground {
  /* This is the background for selected text when focused,
  but we want to use it when not in focus either because we
  will often lose focus during find/replace or in another editor */
  background-color: #d7d4f0 !important;
}

.cm-focused.cm-focused {
  outline: none;
}

/* -- Gutters -- */

.cm .cm-gutters {
  @apply bg-background;

  /* Style line numbers. */
  font-size: 0.75rem;
  color: var(--gray-10);
}

.dark .cm .cm-gutters {
  background-color: transparent;
}

.cm-scroller {
  overflow: auto;
}

/* -- Tooltips: code completion and type hints -- */

#root .cm-tooltip {
  border: none;
  box-shadow: var(--light-shadow);
  border-radius: 4px;

  @apply bg-popover;
}

/*
 First selector is when there is a tooltip by hover
 Second selector is when there is tooltip by cursor
 Third selector is during code completion */
#root .cm-tooltip.cm-tooltip-hover,
#root .cm-tooltip.mo-cm-tooltip,
#root .cm-tooltip.cm-completionInfo {
  max-height: 45vh; /* 45% of viewport height */
  max-width: 40vw; /* 40% of viewport width */
  overflow: auto;

  /* Respect newlines. */
  border-radius: 4px;
  padding: 0.625rem 0.875rem;
}

/* Hover tooltips get highest priority in display. */
#root .cm-tooltip.cm-tooltip-hover {
  z-index: 1000;
}

/* -- Completion Info -- */

/* Compeletion Symbol */
#root .cm-tooltip-autocomplete {
  /* CodeMirror's default is too wide. */
  max-width: 200px;
}

#root .cm-tooltip.cm-tooltip-autocomplete > ul {
  min-width: unset;
}

#root .cm-tooltip-autocomplete ul li[aria-selected] {
  background: #1177ccb0;
  max-width: 200px;
}

.dark #root .cm-tooltip-autocomplete ul li[aria-selected] {
  background: #1177cc80;
  max-width: 200px;
}

#root .cm-tooltip.cm-completionInfo {
  /* Codemirror generates an inline style for these properties,
   * so we have to override them with !important. */
  top: 0 !important;

  /* CodeMirror's default of 400px is often too small. */
  max-width: 36rem !important;
}

#root .cm-completionInfo.cm-completionInfo-right-narrow {
  /* CodeMirror's default makes the completionInfo overlap with the
   * compeletion symbol */
  left: 100%;
}

/* Completion Info may show up to the left or right of another menu item.
 First is the parent (completion list)
 Second is the child (completion info) */
#root .cm-tooltip:has(.cm-completionInfo-left),
#root .cm-tooltip.cm-completionInfo-right {
  border-top-left-radius: 0;
}

#root .cm-tooltip:has(.cm-completionInfo-right),
#root .cm-tooltip.cm-completionInfo-left {
  border-top-right-radius: 0;
}

.cm .cm-completionIcon-function::after {
  content: "λ";
}

.cm .cm-completionIcon-class::after {
  content: "τ";
}

.cm .cm-completionIcon-module::after {
  content: "μ";
}

.cm .cm-completionIcon-statement::after {
  content: "χ";
}

.cm .cm-completionIcon-keyword::after {
  content: "κ";
}

/* -- Panels -- */

.cm .cm-panels {
  background: transparent;
  color: var(--sky-11);
  font-weight: 700;

  @apply text-xs;
}

.cm-ghostText,
.cm-ghostText * {
  opacity: 0.6;
  filter: grayscale(20%);
  cursor: pointer;
}

.cm-ghostText:hover {
  background: var(--gray-3);
}

.cm-codeium-cycle {
  font-size: 9px;
  background-color: var(--sky-3);
  padding: 2px;
  border-radius: 2px;
  display: inline-block;
}

.cm-codeium-cycle-key {
  font-size: 9px;
  font-family: monospace;
  display: inline-block;
  padding: 2px;
  border-radius: 2px;
  border: none;
  background-color: var(--sky-7);
  margin-left: 5px;
}

.cm-codeium-cycle-key:hover {
  background-color: var(--sky-9);
}

.cm-codeium-cycle-explanation {
  font-family: monospace;
  display: inline-block;
  padding: 2px;
}
